<template>
  <div class="contanier">
            <ul class="title">
                <li v-for="(item) in list" :key="item.id" @click="activeIndex=item.id" :class="{active:activeIndex==item.id}">
                     {{item.navs}}
                    <div @click="activeIndex=item.id" :class="{line:activeIndex==item.id}"><b></b></div>
                </li>
            </ul>
            <div class="java-main" style="height:36px;"></div>
            <div class="con-warp">
                <div class="con" >
                    <div class="con-list">
                         <swiper ref="mySwiper" :options="swiperOptions" class="con-wier">
                            <swiper-slide style="height:350px" v-for="(item) in newData" :key="item.name" class="con-slide">
                                <img :src="'https://itdahua.com'+item.image" alt="" style="width:250px;">
                                    <div class="jajie">
                                        <div class="top">
                                            <div class="top-t">
                                                <span class="name">{{item.name}}</span>
                                                <span class="experience">{{item.year}}年工作经验</span>
                                            </div>
                                            <div class="top-p">
                                                <span v-for=" item in newDate " :key="item.id">{{item.name}}</span>
                                            </div>
                                        </div>
                                        <p class="introduce">{{item.introduce}}</p>
                                    </div>
                            </swiper-slide>
                        </swiper>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>   
        </div> 
</template>

<script>
import { Navigation, Pagination } from "swiper";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import { getList } from "../../http/api";
export default {
  data() {
    return {
      data: [],
      list: [],
      activeIndex:7,
      date: [
        {
          name: "H5高级讲师",
          cid: 7,
        },
        {
          name: "Python高级讲师",
          cid: 10,
        },
        {
          name: "UI高级讲师",
          cid: 9,
        },
        {
          name: "JAVA高级讲师",
          cid: 8,
        },
      ],
      swiperOptions: {
        slidesPerView: 4,
        spaceBetween: 30,
        modules: [Navigation, Pagination],
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  directives: {
    swiper: directive,
  },
  components: {
    Swiper,
    SwiperSlide,
  },

  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    newData() {
      let arr = [];
      arr = this.data.filter((item) => item.cid == this.activeIndex);
      return arr;
    },
    newDate() {
      let err = [];
      err = this.date.filter((item) => item.cid == this.activeIndex);
      return err;
    },
  },
  methods: {
    async getListFn() {
      let res = await getList("curricala");
      console.log("*****", res);
      this.list = res;
    },
    async getListly() {
      let res = await getList("teacher");
      console.log("kkkk", res);
      this.data = res;
    },
  },
  created() {
    this.getListFn();
    this.getListly();
  },
  mounted() {
    this.swiper.slideTo(3, 1000, false);
  },
};
</script>

<style scoped lang="scss">
.contanier{
    width: 100%;
    .title{
        width: 1040px;
        height: 33px;
        margin: 0 auto;
        border-bottom: 1px solid #cfcfcf;
         li{
            cursor: pointer;
            width: 130px;
            height: 26px;
            float: left;
            margin-left: 40px;
            font-size: 16px;
            counter-reset: #333;
            text-align: center;
            position: relative;
            .line{
                width: 100%;
                height: 7px;
                background: #0cf;
                position: absolute;
                left: 0;
                bottom: -14px;
                b{
                    content: "";
                    border: 5px solid #0cf;
                    border-bottom-color: transparent;
                    border-left-color: transparent;
                    border-right-color: transparent;
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
         .active{
                height: 26px;
                line-height: 26px;
                background: #0cf;
                position: relative;
                text-align: center;
                font-size: 16px;
                color: #fff;
                border-radius: 15px;
            }
    }
    .con-warp{
    width: 1200px;
    height: 350px;
    margin: 0 auto;
    .con{
        width: 100%;
        height: 100%;
        position: relative;
        .con-list{
            width: 1040px;
            height: 350px;
            margin: 0 auto;
            .con-wier{
                position: relative;
                width: 100%;
                height: 100%;
                z-index: 1;
                display: flex;
                transition-property: transform;
                box-sizing: content-box;
                .con-slide{
                    height: 350px;
                    position: relative;
                    // background-color: yellow;
                    .jajie{
                       width: 250px;
                        background: rgba(0,0,0,.5);
                        position: absolute;
                        left: 0;
                        bottom: 0; 
                        .top{
                            width: 208px;
                            height: 70px;
                            color: #fff;
                            margin: 0 auto;
                            .top-t{
                                margin-top: 16px;
                                margin-bottom: 11px;
                            }
                            .top-p{
                                font-size: 20px;
                            }
                        }
                        .introduce{
                            width: 208px;
                            height: 0;
                            margin: 0 auto;
                            border-top: 0 solid #fff;
                            font-size: 12px;
                            color: #fff;
                            font-family: SimSun;
                            text-indent: 23px;
                            letter-spacing: 1px;
                            line-height: 15px;
                            box-sizing: border-box;
                        }
                    }
                    .jajie:hover{
                        animation:scaleDrow 1s linear ;
                        height: 250px;
                        @keyframes scaleDrow{
                            0%{
                                height: 76px;
                            }
                            100%{
                                height: 250px;
                            }
                        }
                    }
                }
            }
        }
         .swiper-button-prev{
               left: 0;
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background-color: #666;
                color: #fff;
                text-align: center;
                outline: none;
            }
            .swiper-button-next{
                right: 0;
                width: 64px;
                height: 64px;
                border-radius: 50%;
                color: #fff;
                background-color: #666;
                text-align: center;
                outline: none;
            }
    }
}
}
.swiper-container{
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
        .swiper-wrapper{
            margin: 0 auto;
            .swiper-slide{
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            transition-property: transform;
            box-sizing: content-box;
            img{
                width: 100%;
                height: 100%;
            }
            }
        }
    }
</style>